<template>
  <div class="box-full p-m box-border lf flex-col overflow-hidden">
    <a-form :model="listParams" size="small" class="form w-full flex flex-wrap">
      <a-form-item hide-label class="w-42n mr-10">
        <a-select class="w-42n" v-model="listParams.typeId" placeholder="选择用户类型检索" @change="changeCurrent(1)">
          <a-option value="" label="全部"></a-option>
          <a-option v-for="item in cateList" :key="item.id" :value="item.id" :label="item.type"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item hide-label class="w-50n mr-10">
        <a-input v-model="listParams.keyword1" placeholder="输入用户姓名/手机号检索" @pressEnter="changeCurrent(1)">
        </a-input>
      </a-form-item>
      <a-form-item hide-label class="w-80n mr-10">
        <a-input
          v-model="listParams.keyword2"
          placeholder="输入用户身份证号/支付宝账号/银行卡号检索"
          @pressEnter="changeCurrent(1)"
        >
        </a-input>
      </a-form-item>
      <a-form-item hide-label class="w-fit">
        <a-button type="primary" size="small" @click="changeCurrent(1)">
          <template #icon>
            <icon-search />
          </template>
          <template #default>查询</template>
        </a-button>
        <a-button class="ml-m" size="small" @click="onResetSearch">
          <template #icon>
            <icon-sync />
          </template>
          <template #default>重置</template>
        </a-button>
        <a-button class="ml-m" type="primary" size="small" @click="onAddOrEdit(false)">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新增</template>
        </a-button>
      </a-form-item>
    </a-form>
    <div class="w-full flex-1 m-relative overflow-hidden">
      <div class="m-absolute t-0 l-0 b-0 r-0 flex">
        <GiTable
          row-key="id"
          id="gigPaymentStaffIndividual"
          v-model:columns="columns"
          :loading="loading"
          :data="tableData"
          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
          :pagination="pagination"
          @refresh="getTableData"
        >
          <template #custom-extra>
            <a-alert>共 {{ total }} 条数据</a-alert>
          </template>
          <template #zfb="{ record }">
            <div class="flex-col">
              <span>{{ record.name }}</span>
              <span>{{ record.alipayNo }}</span>
            </div>
          </template>
          <template #yhk="{ record }">
            <div class="flex-col">
              <span>{{ record.name }}</span>
              <span>{{ record.bankName }} {{ record.bankCard }}</span>
            </div>
          </template>
          <template #action="{ record }">
            <a-button type="text" size="small" @click="onAddOrEdit(record)"> 编辑 </a-button>
            <a-button type="text" size="small" @click="onDeleteBatch(record.id)"> 删除 </a-button>
          </template>
        </GiTable>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Message, Modal } from '@arco-design/web-vue'
import { usePagination, useLayer } from '@/hooks'
import { lgUserList, lgUserDelete, lgCateListSelect } from '@/apis'
import { deepClone, deleteEmpty } from '@/utils/common'
import Edit from './Edit.vue'

const columns = ref([
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    width: 180
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    width: 120
  },
  {
    title: '支付宝信息',
    slotName: 'zfb',
    width: 150
  },
  {
    title: '银行卡信息',
    slotName: 'yhk',
    width: 150
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: 120,
    render: ({ record }) => {
      return record.type || '--'
    }
  },
  {
    title: '操作',
    width: 120,
    slotName: 'action'
  }
])

const loading = ref(false)
const tableData = ref([])
const cateList = ref([])
const total = ref(0)

const listParams = reactive({
  page: 1,
  pageSize: 10,
  typeId: undefined,
  keyword1: undefined,
  keyword2: undefined,
  isCompany: 0
})

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

// 获取分类
const getCateList = async () => {
  const res = await lgCateListSelect({})
  cateList.value = res.data.list
}

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const param = deepClone(listParams)
    const res = await lgUserList(deleteEmpty(param))
    tableData.value = res.data.list
    total.value = res?.data?.pagination?.total || 0
    setTotal(total.value)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getCateList()
  getTableData()
})

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.typeId = listParams.keyword1 = listParams.keyword2 = undefined
  changeCurrent(1)
}

// 添加/编辑
const onAddOrEdit = (item) => {
  useLayer().openLayer(
    Edit,
    {
      title: `${item ? '编辑' : '新增'}零工打款人员【个人】`,
      params: item ? { ...item } : false,
      area: ['1000px', '80%']
    },
    getTableData
  )
}

// 删除数据
const onDeleteBatch = (id) => {
  Modal.warning({
    title: '提示',
    content: '是否确认删除？',
    hideCancel: false,
    onOk: () => {
      loading.value = true
      lgUserDelete({ id })
        .then(() => {
          Message.success('删除成功')
          getTableData()
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}
</script>

<style lang="scss" scoped>
.textd90000 {
  color: #d90000;
}
.aggs {
  width: 100%;
  line-height: 26px;
  background-color: rgb(var(--primary-1));
  box-shadow: rgb(var(--primary-1)) solid 1px;
  border-radius: 4px;
  border: 1px solid $color-theme;
}
.text808080 {
  color: #808080;
}
.text-size-13 {
  font-size: 13px;
}
.textd43030 {
  color: #d43030;
}
.text2a82e4 {
  color: #2a82e4;
}
</style>
